<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        body {
            background: url(images/login_bg.gif);
            background-repeat: no-repeat;
            width: 100%;
            background-size: 100%;
            margin: auto;
        }
        
        #Login_left {
            float: left;
            width: 48%;
            height: 31.25rem;
            margin-top: 50px;
            /* border: 1px solid red; */
        }
        
        #left_top {
            margin-bottom: 20px 20px;
            text-align: right;
        }
        
        table {
            margin: 0 auto;
            border-collapse: separate;
            /* table的tr加间隔 */
            border-spacing: 0px 30px;
            /* table的tr加间隔 */
        }
        
        left_top {
            text-align: center;
        }
        
        td {
            text-align: center;
        }
        
        a {
            color: skyblue;
        }
        
        #Login_center {
            float: left;
            margin-left: 23px;
            height: 31.25rem;
            margin-top: 50px;
            border: 2px solid #808080;
        }
        
        #Login_right {
            float: right;
            width: 48%;
            height: 31.25rem;
            margin-top: 50px;
            /* border: 1px solid red; */
        }
        /* 精灵图 */
        
        .sprites li span {
            display: inline-block;
            width: 50px;
            height: 50px;
            vertical-align: middle;
            background: url(images/icon.gif) no-repeat;
        }
        
        .sprites li {
            list-style: none;
        }
        
        .sprites li .icon1 {
            background-position: 0 -118px;
        }
        
        .sprites li .icon2 {
            background-position: 0 -160px;
        }
        
        .sprites li .icon3 {
            background-position: 0 -200px;
        }
        
        .sprites li .icon4 {
            background-position: 0 -235px;
        }
        
        .sprites li .icon5 {
            background-position: -10px -270px;
        }
        
        .sprites li .icon6 {
            background-position: -10px -307px;
        }
        /* 精灵图结束 */
        
        .img_one {
            margin-left: 1.25rem;
        }
        
        .img_two {
            text-align: center;
        }
        
        #right_foot {
            margin: 0 100px;
            /* border: 1px solid sandybrown; */
            position: relative;
        }
        
        #right_foot ul {
            display: block;
            width: 300px;
            position: relative;
            margin: 0 auto;
            text-align: center;
        }
        
        #right_foot ul li {
            /* border: 1px solid #808080; */
            text-align: center;
            margin-top: 5px;
            margin-bottom: 5px;
        }
        
        label {
            display: inline-block;
            min-width: 100px;
            /*或者 width: 100px;*/
        }
        
        input {
            display: inline-block;
            min-width: 100px;
            /*或者 width: 100px;*/
        }
    </style>
</head>

<body>
    <p class="head"></p>
    <div id="Login_left">
        <p><img src="images/title_login_2.png"></p>
        <div id="left_top">
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td><label for=""> 会员名：</label></td>
                    <td><input type="text" name="" id="" value="" /></td>
                    <td>（可包含1-9，a-z和下划线）</td>
                </tr>
                <tr>
                    <td><label for="">密码：</label> </td>
                    <td><input type="text" name="" id="" value="" /></td>
                    <td>（至少包含6个字符）</td>
                </tr>
                <tr>
                    <td></td>
                    <td rowspan=2>
                        <a href="login_success.html" target="_blank"><img src="images/login.gif"></a>
                    </td>
                </tr>
            </table>
        </div>
        <div id="left_footer">
            <ul style="list-style: url(images/tubiao.png);">
                <li><a href="#">什么是安全登录？</a></li>
                <li>香港会员（繁體中文用户）由此<a href="#">登录</a></li>
                <li><a href="#">密码安全贴士。</a></li>
                <li>防止病毒或者木马窃取您的账户信息，<a href="#">在线检查</a>您的电脑是否安全。</li>
            </ul>
        </div>
    </div>
    <div id="Login_center">

    </div>
    <div id="Login_right">
        <a href="#">
            <p class="img_one"><img src="images/register.gif"></p>
        </a>
        <!-- 精灵图模式 -->
        <ul class="sprites">
            <li><span class="icon1"></span>
                <a href="#">便宜有好货！</a>超过7000万件商品任您选</li>
            <li><span class="icon2"></span><a href="#">买卖更安全！</a>交易超安全</li>
            <li><span class="icon3"></span> <a href="#">免费开网店！</a>轻松赚钱交友</li>
            <li><span class="icon4"></span><a href="#">超人气社区！</a>精彩活动每一天</li>
        </ul>
		
		
        <div class="img_two">
            <a href="register.html"><img src="images/registernow.gif"></a>
        </div>
        <div id="right_foot">
            <ul class="sprites">
                <li><span class="icon5">	
						</span>您已经是会员？<a href="#">由此登录</a></li>
                <li><span class="icon6">
						</span>繁体中文用户由此<a href="register.html">注册</a></li>
            </ul>
            <!-- 精灵图模式结束 -->
        </div>
    </div>
</body>

</html>